<template>
  <view class="">
    <view class="bg">
      <!-- 左上角logo -->
      <view class="logoImg">
        <img :src="logoImg" alt="" width="20vw" height="20vw" />
      </view>
      <!-- 背景图 -->
      <view class="blue_bg">
        <img :src="treeImg" alt="" width="100vw" />
      </view>
      <!-- 中间按钮 -->
      <view class="btn">
        <div class="btnImg1" @click="navigateToTreePage">
          <img :src="btn1Img" alt="" width="48vw" height="11vw" />
        </div>
      </view>
      <!-- 底部按钮 -->
      <view class="bottomImg" @click="clickIntroduce">
        <img :src="btnImg" alt="" width="30vw" height="7vw" />
      </view>

    </view>
    <!-- {/* 使用条款和隐私政策 */} -->
    <View class="bg_position">
      <View class="bg2" :style="{ display: isAgree ? 'flex' : 'none' }">
        <View class="model">
          <View class="all">
            <View class="title" @click="changeAgree">
              <View class="tip">项目介绍</View>
              <View class="closeImg" @click="isAgree = false" v-show="!isShowNum">
                <img :src="closeImg" alt="" width="5vw" height="5vw" />
              </View>
            </View>
            <View class="content_box">
              <View class="content">
                <PrivacyPolicy></PrivacyPolicy>
              </View>
            </View>
            <View class="btn_box">
              <View class="btn">
                <View :style="{
                  marginRight: '3vw',
                }">
                  <nut-button v-show="num == 0" @click="navigateToTreePage" block type="primary" color="#00a565"
                    shape="round" size="normal">我为莞乡添新绿</nut-button>
                  <nut-button v-show="num != 0" @click="navigateToTreePage" block type="primary" color="#ccc"
                    shape="round" size="normal" :style="{
                      width: '34vw',
                      fontSize: '3.4vw',
                      display: 'flex',
                      paddingLeft: '0',
                      paddingRight: '0',
                      alignItems: 'center',
                    }">
                    <span style="display: flex;align-items: center;">我为莞乡添新绿<i v-show="isShowNum"
                        style="font-size: 2.8vw;margin-bottom: 0.2vw;">({{ num }})</i></span>

                  </nut-button>
                </View>
              </View>
            </View>
          </View>
        </View>
      </View>
    </View>

    <!-- safe-area-inset-bottom -->
    <nut-tabbar v-model="store.active" @tab-switch="tabSwitch" bottom active-color="#4cae4f"
     placeholder style="">
      <nut-tabbar-item tab-title="首页">
        <template #icon="props">
          <img :src="props.active ? icon.home_green : icon.home_black" alt="" />
        </template>
      </nut-tabbar-item>
      <nut-tabbar-item tab-title="我的荣誉">
        <template #icon="props">
          <img :src="props.active ? icon.me_green : icon.me_black" alt="" />
        </template>
      </nut-tabbar-item>
    </nut-tabbar>
    <!-- 拦截层 -->
    <div class="bottomBox" style="z-index: 99999;position: absolute;bottom: 0;width: 50vw;right: 0;"
      @click="clickTaBBar" v-if="isAgree"></div>
  </view>
</template>

<script>
// vue
import { reactive, toRefs, onMounted, ref, onHide } from "vue";
import { useRouter } from "vue-router";
// taro
import Taro, { useShareAppMessage, useShareTimeline, useDidShow, useDidHide } from "@tarojs/taro";
// 接口
import { ApiGetOpenId } from "../../utils/api";

// 图片
import tree from "../../assets/img/tree.jpg"; // tree
import logo from "../../assets/img/logo.png"; // logo
import close from "../../assets/img/close.png"; // close
import btn from "../../assets/img/btn.png"; // 介绍
import btn1 from "../../assets/img/btn1.png"; // 助绿
import PrivacyPolicy from "./PrivacyPolicy.vue";
// tabbar
import { Tabbar, TabbarItem } from '@nutui/nutui-taro'
import home_black from "../../images/home_black.png";
import home_green from "../../images/home_green.png";
import me_black from "../../images/me_black.png";
import me_green from "../../images/me_green.png";
// store tabbar info
import { useCounterStore } from '../../store/tabbar'
import { useInfoStore } from '../../store/info'
export default {
  name: "Home",
  components: {
    PrivacyPolicy,
  },
  setup() {
    // tabbar
    const store = useCounterStore()
    const infoStore = useInfoStore()
    const icon = {
      unactive: home_green,
      home_black: home_black,
      home_green: home_green,
      me_black: me_black,
      me_green: me_green
    }
    const tabSwitch = (item, index) => {
      if (index == 1) {
        if (num.value <= 0) {
          Taro.switchTab({
            url: "/pages/reInfo/index",
          });
          store.tabSwitch(1)
        } else {
          Taro.showToast({
            title: '请阅读3s',
            icon: 'none',
            duration: 2000
          })
          store.tabSwitch(0)
        }
      }
    }
    const clickTaBBar = (item, index) => {
      if (num.value <= 0) {
        Taro.showToast({
          title: '请先关闭项目介绍',
          icon: 'none',
          duration: 2000
        })
      } else {
        Taro.showToast({
          title: '请阅读3s,关闭项目介绍',
          icon: 'none',
          duration: 2000
        })
        store.tabSwitch(0)
      }
    }

    // 图片
    const treeImg = ref(tree);
    const logoImg = ref(logo);
    const btnImg = ref(btn);
    const btn1Img = ref(btn1);
    const closeImg = ref(close);

    // 显示弹出层
    const isAgree = ref(); // 是否显示弹出层
    const num = ref(3); // 倒计时数字
    const isShowNum = ref(true); //是否显示倒计时树种
    const timer = ref() //定时器
    const changeAgree = () => { // 关闭弹出层
      if (num.value > 0) return
      isAgree.value = false
    }
    useDidShow(() => {
      clickIntroduce() // 显示弹出层
    })
    useDidHide(() => {
      clearInterval(timer.value); // 销毁定时器
    })

    //分享 
    useShareAppMessage((res) => {
      const router = useRouter();
      const path = router.currentRoute.value.path;
      if (res.from === "button") {
        // 来自页面内转发按钮
        console.log(res.target);
      }

      return {
        title: "乡村齐助绿",
        // path: "pages/home/index", //?id=123
        path: path,
        // imageUrl: "../../assets/home.jpg",
      };
    });
    // 全局朋友圈分享配置
    useShareTimeline(() => {
      return {
        title: "乡村齐助绿",
        query: "id=123",
      };
    });

    // 跳转
    const navigateToTreePage = () => {
      if (num.value <= 0) {
        Taro.navigateTo({
          url: "/pages/tree/index",
        });
      } else {
      }
    };
    // 点击底下按钮 显示
    const clickIntroduce = () => {
      isAgree.value = true; // 显示弹出层
      isShowNum.value = true // 显示数字
      num.value = 3 //默认3s
      timer.value = setInterval(() => {
        num.value = num.value - 1;
        if (num.value == 0) {
          clearInterval(timer.value);
          isShowNum.value = false;
        }
      }, 1000);
    };

    // 页面加载获取openid
    const getOpenId = () => {
      Taro.login({
        success(res) {
          if (res.code) {
            Taro.request({
              url:
                "https://tree-planting.dgsxczxcjh.org.cn/api" +
                "/base/WeChat/getMpOpenid",
              method: "POST",
              data: { js_code: res.code },
              success: (res) => {
                // 统一处理code = 0
                const { data } = res.data.data;
                infoStore.changeOpenid(res.data)
                Taro.setStorageSync("openid", data.openid);
                Taro.setStorageSync("sessionKey", data.session_key);
                // console.log(data.openid, "OpenId --------");
              },
              fail: (err) => {
                console.log(err, "err"); //
              },
            });
          }
        },
        fail(err) {
          console.log(err, 'login---');
        }
      });
    };

    // 初始化地图
    onMounted(async () => {
      getOpenId();
    });

    return {
      navigateToTreePage,
      clickIntroduce,
      treeImg,
      logoImg,
      btnImg,
      btn1Img,
      closeImg,
      isAgree,
      changeAgree,
      isShowNum,
      timer,
      num,
      icon,
      tabSwitch,
      clickTaBBar,
      store
    };
  },
};
</script>

<style lang="scss">
.home_btn {
  background-color: #ccc;
  /* 按钮背景颜色 */
  color: #fff;
  /* 文本颜色 */
  // border: 2px solid #00a565; /* 添加边框 */
  border: none;
  border-radius: 10px;
  /* 圆角边框 */
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  /* 阴影效果 */
  width: 34vw;
  font-size: 3.4vw;
  display: flex;
  // padding: 10px 20px; /* 调整内边距 */
  padding-left: 0px;
  /* 调整内边距 */
  padding-right: 0px;
  /* 调整内边距 */
  align-items: center;
  justify-content: center;
  /* 水平垂直居中 */
}

.home_btn2 {
  background-color: #00a565;
  /* 按钮背景颜色 */
  color: #fff;
  /* 文本颜色 */
  // border: 2px solid #00a565; /* 添加边框 */
  border: none;
  border-radius: 10px;
  /* 圆角边框 */
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  /* 阴影效果 */
  width: 34vw;
  font-size: 3.4vw;
  display: flex;
  // padding: 10px 20px; /* 调整内边距 */
  padding-left: 0px;
  /* 调整内边距 */
  padding-right: 0px;
  /* 调整内边距 */
  align-items: center;
  justify-content: center;
  /* 水平垂直居中 */
}

.bottomBox {
  height: var(--nut-tabbar-height, 104rpx);
}

.bg {

  // padding-bottom: 44px;
  .logoImg {
    position: absolute;
    top: 6vw;
    left: 6vw;
    z-index: 2;
  }

  .btn {
    position: absolute;
    width: 100vw;
    display: flex;
    justify-content: center;
    flex-direction: column;
    top: 53vh;
    font-size: 5vw;

    button {
      color: #fff;
      background: #00a565;
      border-radius: 8vw;
      width: 48vw;
      font-size: 4.8vw;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      /* 添加动画效果 */
    }

    .btn button:hover {
      transform: translateY(-2px);
      /* 鼠标悬停时稍微向上移动 */
      box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.2);
      /* 放大阴影 */
    }

    .btn button:active {
      transform: translateY(1px);
      /* 按下按钮时稍微向下移动 */
      box-shadow: none;
      /* 移除阴影 */
    }
  }

  .btn1 {
    margin-bottom: 2vh;
  }

  .btnImg1 {
    display: flex;
    justify-content: center;
  }

  .bottomImg {
    position: absolute;
    // bottom: 10vh;
    bottom: calc((var(--nut-tabbar-height, 104rpx)) + 20px);
    // bottom: var(--nut-tabbar-height, 100rpx);
    // (var(--nut-tabbar-height, 100rpx)
    right: 5vw;
  }

  .blue_bg {
    img {
      height: calc(100vh - (var(--nut-tabbar-height, 104rpx)))
    }

    width: 100vw;
    // height: 100vh;
    // height: calc(100vh - 44px);
    position: absolute;
    top: 0;
    // background-image: url("../../assets/img/tree.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    /* 确保图片覆盖整个容器 */
    background-position: center;
    /* 图片居中显示 */
    // z-index: -1;
  }
}

// var(--nut-tabbar-height, 100rpx);
.bg_position {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;

  .bg2 {
    // background-color: #ccc;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    .model {
      width: 80vw;
      height: 70vh;
      border-radius: 20px;
      background-color: #fff;

      .all {
        display: flex;
        flex-direction: column;
        height: 100%;
        font-size: 3.5vw;
        // font-size: 4.5vw;
        // font-weight: 600;
      }

      .title {
        font-size: 4.5vw;
        // font-size: 6vw;
        // font-weight: 600;
        text-align: center;
        padding-top: 1vh;
        position: relative;

        .closeImg {
          position: absolute;
          right: 26px;
          top: 22px;
        }
      }

      .content_box {
        width: 100%;
        // height: 70%;
        line-height: 1.5;
        flex: 1;
        overflow: hidden;
        padding: 1.3vh 5vw 0vh;
        // padding: 1.5vh 5vw 0vh;
        // padding-top: 1.5vh;
        box-sizing: border-box;

        .content {
          //   padding: 2vh 2vw;
          // height: 62.3%;
          height: 100%;
          // height: 62.3vh;
          overflow-x: hidden;
          overflow-y: auto;
        }
      }

      .tip_box {
        // height: 10vh;
        padding: 0.5vh 4.4vw 1vh;
        box-shadow: 0 -1px 1vh rgba(0, 0, 0, 0.2);

        /* 添加阴影效果 */
        .tip {
          font-size: 3vw;
          line-height: 1.5;

          .txt {
            // color:$theme-color;
            color: #00a565;
          }
        }
      }

      .btn_box {
        border-top: 1px solid #ccc;
        width: 100%;
        padding: 3.5% 0;
        // height: 20vh;
        display: flex;
        align-items: center;
        justify-content: center;

        .btn {
          // width: 15vh;
          display: flex;
          justify-content: center;
        }
      }
    }
  }

  // .tip_box {
  //   padding: 0.5vh 5vw 1vh;
  //   box-shadow: 0 -1px 1vh rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
  //   .tip {
  //     font-size: 4vw;
  //     .txt {
  //       color: #37aae1;
  //     }
  //   }
  // }
  // .btn_box {
  //   border-top: 1px solid #ccc;
  //   width: 100vw;
  //   padding: 4vh 0;
  //   // height: 20vh;
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
  //   .btn {
  //     // width: 15vh;
  //     display: flex;
  //     justify-content: center;
  //   }
  // }
}
</style>
